import React,{Suspense} from 'react'
import routes  from './routerConfig';
import {BrowserRouter,Routes,Navigate, Route } from 'react-router-dom'

function RouterView() {
    const renderRouter=(arr)=>{
        return arr.map((item,index) =>{
            return item.path ? <Route key={index} path={item.path} element={<item.element></item.element>}>
                { item.children && renderRouter(item.children) }
            </Route>:
            <Route key={index} path={item.from} element={<Navigate to={item.to}></Navigate>}></Route>
        })
    }
  return (
    <Suspense fallback="路由加载中">
        <BrowserRouter>
            <Routes>
                {
                    renderRouter(routes)
                }
            </Routes>
        </BrowserRouter>
    </Suspense>
  )
}

export default RouterView